Ext.define('iMedproplus.view.admin.structure.UnitPanelGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.adminstrucutrepanelgrid',
    store: 'iMedproplus.store.OrganizationStructure',
    title: 'Jendostki organizacyjne',
    id: 'unit-gridpanel',
    rowEditor : null,
    
    initComponent: function() {
        var me = this;
        me.rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2,
            listeners: {
                canceledit: {
                    fn: me.onCancelEdit,
                    scope: me
                },
                edit: {
                    fn: me.onUpdateEdit,
                    scope: me
                }
            }
        });
        Ext.applyIf(me, {
            columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'code',
                text: 'Kod',
                flex: 2,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'type',
                text: 'Typ',
                flex: 1 ,                   
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Nazwa',
                flex: 4,                   
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'nfzCode',
                text: 'Kon tech. komórki',
                flex: 2,                   
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'booleancolumn',
                dataIndex: 'status',
                text: 'Status',
                flex: 1,
                align: 'center',
                renderer : function(value){
                    var cssPrefix = Ext.baseCSSPrefix,
                    cls = [cssPrefix + 'grid-checkheader'];

                    if (value) {
                        cls.push(cssPrefix + 'grid-checkheader-checked');
                    }
                    return '<div class="' + cls.join(' ') + '">&#160;</div>';
                },
                editor: {
                    xtype: 'checkboxfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'departmentCodePart3',
                text: 'Kod resort. cz. 3',
                flex: 2,                   
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'departmentCodePart5',
                text: 'Kod resort. cz. 5',
                flex: 2,                   
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'departmentCodePart6',
                text: 'Kod resort. cz. 6',
                flex: 2,                   
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'departmentCodePart7',
                text: 'Kod resort. cz. 7',
                flex: 2,                   
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'departmentCodePart8',
                text: 'Kod resort. cz. 8',
                flex: 2,                   
                editor: {
                    xtype: 'textfield'
                }
            }
                
            ],
            viewConfig: {
            },
            plugins:  [ me.rowEditor],
            dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                {
                    xtype: 'button',
                    id: 'hierarchy-add-button',
                    text: 'Dodaj element do struktury',
                    icon: './resources/icons/arrow_left.png',
                    listeners:{
                        click:{
                            fn: me.onAddOrgStrucutreElemToTreeButtonClick,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'button',
                    text: 'Dodaj',
                    icon: './resources/icons/add.png',
                    listeners : {
                        click : {
                            fn : me.onUnitAddButtonClick,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'button',
                    text: 'Usuń',
                    icon: './resources/icons/delete.png',
                    listeners: {
                        click: {
                            fn : me.onUnitRemoveButtonClick,
                            scope: me
                        }
                    }
                },  
                {
                    xtype: 'button',
                    text: 'Zapisz',
                    icon: './resources/icons/database_save.png',
                    listeners: {
                        click: {
                            fn : me.onUnitSaveButtonClick,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'button',
                    text: 'Anuluj',
                    icon: './resources/icons/cancel.png',
                    listeners: {
                        click: {
                            fn : me.onUnitCancelButtonClick,
                            scope: me
                        }
                    }
                }]
            }
            ],
            selModel: Ext.create('Ext.selection.RowModel', {
                mode: 'SINGLE'
            }),

            listeners: {
                selectionchange: {
                    fn: me.onGridpanelSelectionChange,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },
    
    onAddOrgStrucutreElemToTreeButtonClick: function(){
        this.fireEvent("addOrganizationStrucutreToTree");
    },
    onUnitAddButtonClick: function(){
        this.fireEvent('itemAdd', this.rowEditor);
    },
    
    onCancelEdit: function(grid){
        this.fireEvent('itemCancelEdit', grid);
    },
    
    onUpdateEdit: function() {
        this.fireEvent('itemUpdate');
    },
    
    onUnitRemoveButtonClick: function(){
        var grid = Ext.getCmp('unit-gridpanel');
        this.fireEvent('itemRemove', grid.getSelectionModel());
    },
    
    onUnitSaveButtonClick: function(){
        this.fireEvent('itemSave');
    },
    onGridpanelSelectionChange: function(tablepanel, selections, options){
        this.fireEvent('organizationStructureSelectionChange', selections);
    },
    onUnitCancelButtonClick: function(){
        var grid = Ext.getCmp('unit-gridpanel');
        grid.store.load();
    }

});